<template>
  <el-dialog
    v-model="dialogMapShow"
    title="地图"
    width="900"
    class="dialog-map-box"
    destroy-on-close
  >
    <div class="map-box-content">
      <!-- <div class="map-top-search-box">
        <el-autocomplete
          v-model="storeForm.address"
          class="store-el-input-box"
          clearable
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入详细位置"
        ></el-autocomplete>
      </div> -->
      <div class="map-box" ref="mapId">
        <img src="https://guiji.sztaisheng.top/zuobiaod.png" class="map-icon" />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogMapShow = false">取消</el-button>
        <el-button type="primary" @click="dialogMapShow = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  ref,
  defineEmits,
  nextTick,
} from 'vue'
const { proxy: that } = getCurrentInstance()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    },
  },
})
let dialogMapShow = ref(false)
let lat = ref(null)
let lng = ref(null)
const initMap = () => {
  //定义地图中心点坐标
  var center = new TMap.LatLng(lat.value, lng.value)
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  var map = new TMap.Map(that.$refs.mapId, {
    // center: center, //设置地图中心点坐标
    zoom: 17.2, //设置地图缩放级别
    pitch: 43.5, //设置俯仰角
    rotation: 45, //设置地图旋转角度
  })
  // console.log(map.getCenter(), 'map.getCenter()')
  // // marker中心点
  // var marker = new TMap.MultiMarker({
  //   map: map,
  //   styles: {
  //     // 点标记样式
  //     marker: new TMap.MarkerStyle({
  //       width: 20, // 样式宽
  //       height: 30, // 样式高
  //       anchor: { x: 10, y: 30 }, // 描点位置
  //     }),
  //   },
  //   geometries: [
  //     // 点标记数据数组
  //     {
  //       // 标记位置(纬度，经度，高度)
  //       position: center,
  //       id: 'marker',
  //     },
  //   ],
  // })
  // //绑定点击事件
  // map.on('click', function (evt) {
  //   console.log(evt, 'dianji', marker)
  //   var lat = evt.latLng.getLat().toFixed(6)
  //   var lng = evt.latLng.getLng().toFixed(6)
  //   marker.geometries.position = new TMap.LatLng(lat, lng)
  // })
}
const MapshowFunc = () => {
  nextTick(() => {
    initMap()
  })
  return
  const KEY = '2LMBZ-YHK6J-J2VF4-D2GP4-W6X6Q-QOFFA'
  txMapApi.locationApi({ key: KEY }).then(res => {
    console.log(res)
    lat.value = res.result.location.lat
    lng.value = res.result.location.lng
    nextTick(() => {
      initMap()
    })
  })
}
watch(
  () => props.show,
  (newValue, oldValue) => {
    dialogMapShow.value = props.show
    MapshowFunc();
  }
)
const emit = defineEmits(['onClose'])
const autocompleteFunc = e => {
  console.log(e)
  if (e) {
    storeForm.value.longitude = e.location.lng
    storeForm.value.latitude = e.location.lat
  } else {
    storeForm.value.longitude = ''
    storeForm.value.latitude = ''
  }
}
const querySearchAsync = (str, cb) => {
  console.log(str)
  if (!str) return cb([])
  txMapApi
    .suggestionApi({
      key: '2LMBZ-YHK6J-J2VF4-D2GP4-W6X6Q-QOFFA',
      keyword: str,
    })
    .then(res => {
      console.log(res)
      res.data.forEach(element => {
        element.value = element.address + element.title
      })
      return cb(res.data)
    })
}
</script>
<style lang="scss">
.dialog-map-box {
  border-radius: 8px;
  .el-dialog__body {
    padding: 10px 20px;
    box-sizing: border-box;
  }
  .map-box-content {
    width: 100%;
    height: 50vh;
    position: relative;
    .map-top-search-box {
      width: 100%;
      position: absolute;
      padding: 10px;
      left: 0;
      top: 0;
      z-index: 9999;
      .store-el-input-box {
        width: 280px !important;
        height: 40px;
        border-radius: 4px;
        .el-input {
          width: 280px !important;
          height: 40px;
          border-radius: 4px;
        }
        .el-input__wrapper {
          box-sizing: border-box;
        }
      }
    }
    .map-box {
      width: 100%;
      height: 100%;
      position: relative;

      // 阻止复制
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE/Edge */
      user-select: none; /* 标准语法 */
      .map-icon {
        width: 60px;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
      }
    }
  }
}
</style>